<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG_VUE</title>
    <script src="https://cdn.staticfile.org/vue/2.6.11/vue.min.js"></script>
    <!-- <script src="https://cdn.staticfile.org/vuex/3.5.1/vuex.min.js"></script> -->
    <style>
        body {
            background-color: #202020;
            color: #f0f0f0;
        }
    </style>

    <script type="text/x-template" id="c-robot">
        <g>
            <rect :x="x" y="10" width="40" height="40" stroke="#b8d7a3" fill="transparent" stroke-width="4"></rect>
            <text :x="x" y="20" stroke="#fff">{{idx}},{{val}}</text>
        </g>
    </script>

    <script type="text/x-template" id="c-track">
        <g>
            <rect :x="idx * 50 + 4" y="60" width="40" height="40"  fill="#569cd6" stroke-width="0"></rect>
            <rect :x="idx * 50 + 4" y="105" width="40" height="40"  fill="#569cd6" stroke-width="0"></rect>
            <rect :x="idx * 50" y="150" width="48" height="2"  fill="#569cd6" stroke-width="0"></rect>
        </g>
    </script>

</head>

<body>
    <div id="APP">
        Input Number: <input type="number" id="ipt" v-model="ipt" placeholder="输入十进制数" />
        <svg width="1200" height="800">
            <c-robot v-for="(r,i) in robots" :idx="i" :val="r"></c-robot>
            <c-track v-for="(t,j) in tracks" :idx="j" :val="t"> </c-track>
        </svg>
    </div>
    <script>
        Vue.config.devtools = 'development';

        Vue.component("c-robot", {
            template: "#c-robot",
            props: {
                idx: Number,
                val: Number
            },
            data() {
                return {
                    x: this.idx * 50 + 4,
                }
            },
            // watch: {
            //     idx: {
            //         handler(n, o) {
            //             console.log(`n : ${n},o : ${o}`);
            //             if (!o) return;
            //             if (n > o) {
            //                 this.moveRight();
            //             }
            //         },
            //         immediate: true
            //     }
            // },
            created() {
                this.$watch(() => {
                    return { idx: this.idx, val: this.val };
                }, (n, o) => {
                    if (n.idx > o.idx) {
                        console.log(`$watch n : ${n},o : ${o}`);
                        this.moveRight()
                    }
                });
            },
            methods: {
                moveRight() {
                    console.log('this.idx : ', this.idx);
                }
            },
        });

        Vue.component("c-track", {
            template: "#c-track",
            props: {
                idx: Number,
                val: Number
            }
        });

        const APP = new Vue({
            el: "#APP",
            data: {
                ipt: 0,
                robots: [9, 8, 7, 6, 5, 4, 3, 2, 1, 0, 9],
                tracks: [1, 0, 2, 1, 0, 1, 0, 1, 0, 1, 0],
            },
            methods: {
                addRobotHead(r) {
                    this.robots.unshift(r);
                }
            }
        });
    </script>
</body>

</html>